<template>
  <div style="padding: 24px;">
    <div v-if="buyStatus==='NORMAL'||buyStatus===''">
      <!-- 顶部区域 -->
      <el-row class="top">
        <el-card shadow="hover" class="box-card">
          <div slot="header" class="clearfix">
            <h3>{{ commodityInfo.description }}</h3>
            <!-- <el-button type="primary">选择商品</el-button> -->
            <el-button type="primary" @click="holdDialogVisible=true">暂存订单</el-button>
            <p>您正在预定的日期是【{{ query.datetime | dateFormat }}】，预定此商品即已同意《环球影城主题公园》和《神舟旅行社》的预定服务协议。</p>
          </div>
          <div class="text_item">
            <h3>商品信息</h3>
            <el-row>
              <el-col :span="2">
                <p>当日票价</p>
                <el-tag type="warning">￥{{ price }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>商品票型</p>
                <el-tag>{{ ticketCategory[commodityInfo.ticketCategory] }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>退款政策</p>
                <el-tag>{{ commodityInfo.refundable ?"允许":'不允许' }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>退款费用</p>
                <el-tag>￥{{ commodityInfo.serviceFee }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>验票类型</p>
                <el-tag>{{ commodityInfo.mediaType }}</el-tag>
              </el-col>
              <el-col v-if="commodityInfo.uepEntitlement" :span="2">
                <p>快速通道类型</p>
                <el-tag>{{ commodityInfo.uepEntitlement }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>年龄限制</p>
                <el-tag>{{ commodityInfo.personTypeMinAge }}~{{ commodityInfo.personTypeMaxAge }}</el-tag>
              </el-col>
              <el-col :span="2">
                <p>购买限制</p>
                <el-tag>{{ commodityInfo.minQuantity }}~{{ commodityInfo.maxQuantity }}</el-tag>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-row>
      <!-- 底部区域 -->
      <el-row class="bottom">
        <el-col :span="15">
          <el-card shadow="hover" class="box-card-left">
            <div slot="header" class="clearfix">
              <h3>旅客信息</h3>
              <el-upload
                id="upload"
                ref="upload"
                class="upload-demo"
                action="#"
                :http-request="httpRequest"
                :on-remove="onRemove"
                :limit="1"
              >
                <el-button size="small" type="primary">导入旅客</el-button>
              </el-upload>
              <el-button type="text" @click="openUrl">下载Excel模板</el-button>
            </div>
            <div class="text_item">
              <!-- 旅客循环 -->
              <el-row v-for="(item,index) in rowLsit" :key="index" style="margin-top:24px">
                <el-col :span="5">
                  <p v-if="index===0">
                    主要旅客
                    <i style="margin-left:5px" class="icon" @click="iconDialogVisible=true">?</i>
                  </p>
                  <p v-else>旅客</p>
                  <el-input ref="input" v-model="item.name" placeholder="请输入旅客姓名" />
                </el-col>
                <el-col :span="5">
                  <p>证件类型</p>
                  <el-select v-model="item.id_type" placeholder="请选择">
                    <el-option v-for="(val, key, i) in id_type" :key="i" :label="val" :value="key" />
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <p>证件号</p>
                  <el-input v-model="item.id_no" placeholder="请输入证件号" />
                </el-col>
                <el-col :span="5">
                  <p>
                    <span v-if="index===0" style="color:red">*</span>手机号
                  </p>
                  <el-input
                    v-model="item.telephone"
                    placeholder="请输入手机号"
                    @keyup.enter.native="addRow(index)"
                  />
                </el-col>
                <el-col v-if="buyStatus===''&& index===rowLsit.length-1" :span="4">
                  <svg-icon
                    v-if="rowLsit.length!==maxQuantity"
                    icon-class="+"
                    @click="addRow(index)"
                  />
                  <svg-icon v-if="rowLsit.length>1" icon-class="-" @click="reduceRow(index)" />
                </el-col>
                <el-col v-if="buyStatus==='NORMAL'" :span="4" class="success">
                  <svg-icon icon-class="success" />
                  <span>出票成功</span>
                </el-col>
              </el-row>
            </div>
            <!-- 出票 -->
            <img
              v-if="buyStatus===''"
              class="fixed"
              src="@/assets/homepage/tickets.png"
              @click="addTicketDialogVisible=true"
            >
          </el-card>
        </el-col>
        <el-col :span="8" :push="1">
          <el-card v-if="buyStatus===''" shadow="hover" class="box-card-right">
            <div class="calendar-wrapper">
              <btg-calendar
                ref="calendar"
                :options="calendarOptions"
                :refresh-func="fetchTickets"
                @clickDate="clickDate"
                @changeTicketCode="changeTicketCode"
              />
            </div>
          </el-card>
          <el-card v-if="buyStatus==='NORMAL'" shadow="hover" class="box-card-right-success">
            <div slot="header" class="clearfix">
              <h3>你还可以......</h3>
            </div>
            <div class="text_item">
              <el-button type="primary" plain>继续预订该门票</el-button>
              <el-button type="primary" plain>搜索出行日酒店</el-button>
              <el-button type="success" plain>退票或改签</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 提示对话框 -->
      <el-dialog title="提示" :visible.sync="iconDialogVisible" width="30%">
        <span>主要旅客电话号码不能为空</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="iconDialogVisible = false">取 消</el-button>
          <el-button class="el-button-right" type="primary" @click="iconDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 暂存订单对话框 -->
      <el-dialog title="提示" :visible.sync="holdDialogVisible" width="30%" class="hold">
        <span>订单名称</span>
        <el-input v-model="holdQuery.name" placeholder="如不填写，默认为【未填写】" />
        <p>暂存订单将在保存后7天自动删除</p>
        <div class="dialog-footer">
          <el-button type="primary" @click="createHoldOrder">确 定</el-button>
          <el-button class="el-button-right" @click="holdDialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 选择商品弹出框 -->
      <div v-if="dialogVisible" class="wrapper">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <h3>旅客信息</h3>
            <svg-icon icon-class="close" @click="dialogVisible=false" />
          </div>
          <div class="text_item">
            <el-row style="margin-bottom:22px">
              <el-col :span="8">
                <el-input placeholder="请输入名称筛选" />
              </el-col>
              <el-col :span="3">
                <el-button class="filter" type="primary" plain>筛选</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" plain class="reset" circle>
                  <i class="el-icon-refresh-right" />
                </el-button>
              </el-col>
            </el-row>
            <!-- 循环商品信息 -->
            <div
              v-for="(item,index) in list"
              :key="index"
              class="commodity"
              @click="choiceShow(index)"
            >
              <img src="@/assets/homepage/commodity.png" alt="商品背景">
              <p class="p_top">一日无限次快速卡</p>
              <p class="p_bottom">一日无限次快速卡</p>
              <img
                v-if="choiceValue===index"
                class="choice"
                src="@/assets/homepage/choice.png"
                alt="当前选择"
              >
            </div>
          </div>
        </el-card>
      </div>
      <!-- 出票弹出对话框 -->
      <el-dialog title="提示" :visible.sync="addTicketDialogVisible" width="430px" class="addTicket">
        <p>
          <i>!</i>请确认旅客信息，成功出票将后将对商户资金进行扣款
        </p>
        <div>
          <el-button @click="addTicketDialogVisible=false">取 消</el-button>
          <el-button class="el-button-right" type="primary" :autofocus="true" @click="addTicket">确 定</el-button>
        </div>
      </el-dialog>
      <!-- <el-button v-if="addTicketDialogVisible" type="primary" :autofocus="true" @keyup.enter.native="addTicket" @click="addTicket">确 定</el-button> -->
    </div>
    <!-- 购票失败 -->
    <fail v-if="buyStatus==='REFUND'" />

    <!-- 等待中 -->
    <awaits
      v-if="buyStatus==='PROCESS'"
      :uid="uid"
      @continueBuying="continueBuying"
      @updataBuyStatus="updataBuyStatus"
    />
  </div>
</template>
<script>
import fail from './buyStatus/fail'
import awaits from './buyStatus/await'
import BtgCalendar from 'btgcalendar'
import { getTicket } from '@/api/travel'
import { addTicket } from '@/api/order'
import { createHoldOrder, getHoldOrderdDtails } from '@/api/holdOrder'
import XLSX from 'xlsx'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from '@/utils/defineSteps'
export default {
  name: 'Issue',
  filters: {
    dateFormat(date) {
      date = date.substring(0, 10)
      return date
    }
  },
  components: {
    fail,
    awaits,
    BtgCalendar
  },
  data() {
    return {
      options: [],
      values: {
        value: 'GovernmentId',
        value1: 'GovernmentId'
      },
      choiceValue: '',
      dialogVisible: false,
      addTicketDialogVisible: false,
      list: [
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' },
        { a: '1' }
      ],
      calendarOptions: {
        type: 'mini', // [large, small]
        ticketsData: {},
        ticketCode: '',
        updateTitle: '最后更新时间',
        priceColor: [
          {
            value: 99999999, // 实际数量小于value就显示value的color
            type: 'price' // 可以设置type
          }
        ],
        availableColor: [
          {
            value: 2000,
            type: 'low'
          },
          {
            value: 10000,
            type: 'mid '
            // backgroundColor: '#FEF0F0', // 或者自定义颜色
            // borderColor: '#FBC4C4',
            // textColor: '#FF6F5B'
          },
          {
            value: 10000,
            type: 'high '
            // backgroundColor: '#ECF8F2',
            // borderColor: '#97D2B4',
            // textColor: '#42B983'
          }
        ],
        enableRefresh: true, // 是否需要刷新按钮， default true
        enableSelect: true, // 是否需要条件选择器， default true
        isHoverEvent: true, // 鼠标移动到日期上，如果有事件，是否需要显示，default true
        typeMap: {} // 类型map，可不传
      },
      tableData: [],
      rowLsit: [
        {
          name: '',
          id_type: '',
          id_no: '',
          telephone: ''
        }
      ],
      // 证件类型
      id_type: {
        Passport: '护照',
        GovernmentId: '身份证'
      },
      //
      query: {
        code: '',
        datetime: '',
        price: null,
        quantity: null,
        guest: []
      },
      // 商品信息
      commodityInfo: {},
      // 当日价格
      price: '',
      // 单价数组
      pricesList: [],
      // 订单号
      uid: '',
      maxQuantity: null,
      // 状态
      buyStatus: '',
      iconDialogVisible: false,
      holdDialogVisible: false,
      holdQuery: {
        order_type: 'TICKET',
        per_data: '',
        name: ''
      },
      clientWidth: '',
      driver: null,
      ticketCode: ''
    }
  },
  computed: {
    event() {
      return JSON.parse(localStorage.getItem('event'))
    },
    ticketCategory() {
      return JSON.parse(localStorage.getItem('init')).ticket.ticket_category
    },
    personType() {
      return JSON.parse(localStorage.getItem('init')).ticket.person_type
    }
  },
  watch: {
    tableData: function(data) {
      var keyMap = {
        姓名: 'name',
        手机号: 'telephone',
        '证件类型（身份证、护照）': 'id_type',
        证件号: 'id_no'
      }
      if (data !== []) {
        data.forEach((item, index, array) => {
          // 转化键值
          array[index] = Object.keys(array[index]).reduce((newData, key) => {
            const newKey = keyMap[key] || key
            newData[newKey] = array[index][key]
            return newData
          }, {})
          // 将身份证护照转化为英文
          switch (array[index].id_type) {
            case '身份证':
              array[index].id_type = 'GovernmentId'
              break
            case '护照':
              array[index].id_type = 'Passport'
              break
          }
        })
        // 判断主要旅客手机号是否为空
        if (data[0].telephone === '') {
          this.$message({
            showClose: true,
            message: '主要旅客的电话号码不能为空',
            duration: 3000,
            type: 'warning'
          })
        } else {
          this.maxQuantity = parseInt(
            JSON.parse(localStorage.getItem('init')).ticket_max_number
          )
          //

          data.forEach((item, index, array) => {
            array[index].telephone = item.telephone.toString()
            array[index].id_no = item.id_no.toString()
          })

          //
          // 判断是否符合长度
          if (data.length > this.maxQuantity) {
            this.$message({
              showClose: true,
              message:
                '最大购买单位为' +
                this.maxQuantity +
                '人,所以给您截取了前' +
                this.maxQuantity +
                '行数据',
              duration: 3000,
              type: 'warning'
            })
            this.rowLsit = []
            for (var i = 0; i < this.maxQuantity; i++) {
              this.rowLsit.push(data[i])
            }
          } else {
            this.rowLsit = []
            data.forEach((item, index, array) => {
              this.rowLsit.push(item)
            })
          }
        }
      }
    },
    'query.datetime': function(newTime) {
      newTime = newTime.substr(0, 10)
      this.pricesList.forEach((item, index, array) => {
        // 数据错误暂时写死
        const itemTime = item.datetime.substr(0, 10)

        if (itemTime === newTime) {
          this.price = item.value
        }
      })
    }
  },
  created() {
    this.fetchTickets()
    if (this.$route.query.event) {
      this.query.datetime = this.event.datetime
      this.pricesList = JSON.parse(
        localStorage.getItem('products')
      ).baseProduct.prices
    }
    if (this.$route.query.id) {
      this.getHoldOrderdDtails(this.$route.query.id, this.$route.query.price)
      this.pricesList = JSON.parse(
        localStorage.getItem('products')
      ).baseProduct.prices
    }
    this.keyupSubmit()
  },
  mounted() {
    if (this.$route.query.stusta === true) {
      this.$nextTick(function() {
        this.driver = new Driver({
          stageBackground: '#ffffff',
          closeBtnText: '确定', // 关闭按钮的文字,
          allowClose: true
        })
        this.driver.defineSteps(steps)
        this.driver.start()

        this.$refs.input[0].focus()
        this.$refs.calendar.selectedDate(this.$route.query.datetime)
        document.getElementById('driver-highlighted-element-stage').style.left =
          '1346px'
        document.getElementById(
          'driver-highlighted-element-stage'
        ).style.height = '477.783px'
      })
    } else {
      this.$refs.calendar.selectedDate(this.event.datetime)
      console.log(this.event.datetime)
    }
  },
  methods: {
    keyupSubmit() {
      document.onkeyup = (e) => {
        const _key = window.event.keyCode
        const _ctrlKey = window.event.ctrlKey
        if (_key === 13 && this.buyStatus === '' && _ctrlKey) {
          this.addTicketDialogVisible = true
        } else if (_key === 13 && this.addTicketDialogVisible) {
          this.addTicket()
        }
      }
    },
    choiceShow(index) {
      this.choiceValue = index
    },
    getTicket() {
      getTicket().then((res) => {
        this.calendarOptions.ticketsData = res.data.data
        this.calendarOptions.typeMap = JSON.parse(localStorage.getItem('init')).ticket
        this.calendarOptions.ticketCode = this.$route.query.ticketCode
        this.ticketCode = this.$route.query.ticketCode
        console.log(this.ticketCode)
        this.commodityInfo =
          res.data.data.products[this.ticketCode]
        console.log(this.commodityInfo)
        this.pricesList = this.commodityInfo.baseProduct.prices
      })
    },
    changeTicketCode(event) {
      //
      console.log(this.calendarOptions.ticketsData)
      this.ticketCode = event
      console.log(this.ticketCode)
      const newTime = this.query.datetime.substr(0, 10)
      this.commodityInfo =
         this.calendarOptions.ticketsData.products[event]
      this.pricesList = this.commodityInfo.baseProduct.prices
      this.pricesList.forEach((item, index, array) => {
        const itemTime = item.datetime.substr(0, 10)
        if (itemTime === newTime) {
          this.price = item.value
        }
      })
      this.$refs.calendar.selectedDate(newTime)
      console.log(this.query.datetime, newTime)
      // this.$refs.calendar.selectedDate(this.query.datetime.substr(0, 10))
    },
    fetchTickets() {
      this.getTicket()
    },
    clickDate(event) {
      // this.driver.end()
      // 如果没有事件，返回数据格式 2020-10-24
      // 如果有事件，返回数据格式同直接点击门票事件

      if (document.getElementById('driver-popover-item')) {
        document.getElementById('driver-popover-item').style.display = 'none'
        document.getElementById('driver-page-overlay').style.display = 'none'
      }
      const newTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(
        this.calendarOptions.ticketsData.dataGetDateTime
      )[0]

      // === event.datetime
      var formatDate1 = new Date(newTime)
      var formatDate2 = new Date(event.dateTime)

      if (formatDate1 > formatDate2) {
        return this.$message({
          showClose: true,
          message: '请选择大于或等于当前日期的时间段',
          duration: 3000,
          type: 'warning'
        })
      } else if (event.event === null) {
        return this.$message({
          showClose: true,
          message: '该日期暂时没有数据，请选择其他日期',
          duration: 3000,
          type: 'warning'
        })
      } else {
        this.query.datetime = event.event.datetime
        this.$refs.calendar.selectedDate(event.event.datetime)
      }
    },
    // 下载Excel模板
    openUrl() {
      window.open(process.env.VUE_APP_URL)
    },
    // 导入旅客
    httpRequest(e) {
      const file = e.file // 文件信息
      if (!file) {
        // 没有文件
        return false
      } else if (!/\.(xlsx)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message({
          showClose: true,
          message: '上传格式不正确，请上传xlsx格式',
          duration: 3000,
          type: 'error'
        })
        return false
      }
      const fileReader = new FileReader()
      // const this_ = this
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary' // 以字符编码的方式解析
          })
          const exlname = workbook.SheetNames[0] // 取第一张表
          const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
          this.tableData = exl
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(file)
    },
    // 移除旅客
    onRemove() {
      this.rowLsit = [
        {
          name: '',
          id_type: 'GovernmentId',
          id_no: '',
          telephone: ''
        }
      ]
      // this.mainPassenger = {}
    },
    // 添加一行
    async addRow(index) {
      this.maxQuantity = parseInt(
        JSON.parse(localStorage.getItem('init')).ticket_max_number
      )
      if (this.rowLsit.length < this.maxQuantity) {
        await this.rowLsit.push({
          name: '',
          id_type: '',
          id_no: '',
          telephone: ''
        })
        this.$refs.input[index + 1].focus()
      } else {
        this.$message({
          showClose: true,
          message: '最大购买单位为' + this.maxQuantity + '人',
          duration: 3000,
          type: 'warning'
        })
      }
    },
    async reduceRow(index) {
      // var index = this.rowLsit.length
      if (this.rowLsit.length > 1) {
        await this.rowLsit.pop()
        this.$refs.input[index - 1].focus()
      } else {
        this.$refs.input[index].focus()
      }
    },
    // 出票
    addTicket() {
      const data = this.addData()
      console.log(this.pricesList)
      console.log(data)
      // this.query.quantity = this.query.guest.length
      // 出票
      this.addTicketDialogVisible = false
      addTicket(data)
        .then((res) => {
          if (res.data.code === 200) {
            this.buyStatus = res.data.data.status
            this.uid = res.data.data.order_id
            this.fetchTickets()
          }
        })
        .catch((error) => {
          if (error.code === 422) {
            this.$message({
              showClose: true,
              message: error.message,
              duration: 3000,
              type: 'error'
            })
          } else if (error.code === 400) {
            this.$message({
              showClose: true,
              message: error.message,
              duration: 3000,
              type: 'error'
            })
          }
        })
    },
    // 出票暂存数据
    addData() {
      const data = {
        ticketEntity: [],
        contact: {
          name: '',
          telephone: ''
        }
      }
      // 给contact赋值
      data.contact.name = this.rowLsit[0].name
      data.contact.telephone = this.rowLsit[0].telephone
      // 给ticketEntity赋值
      const data_ticket = {
        code: null,
        datetime: null,
        price: null,
        guest: []
      }
      data_ticket.code = this.ticketCode
      console.log(this.ticketCode)
      data_ticket.datetime = this.query.datetime.replace(' ', 'T')
      data_ticket.price = this.price.toFixed(2)
      data.ticketEntity.push(data_ticket)
      this.rowLsit.forEach((item) => {
        data_ticket.guest.push(item)
      })
      return data
    },
    // 修改状态
    updataBuyStatus(data) {
      this.buyStatus = data
      this.rowLsit = [
        {
          name: '',
          id_type: '',
          id_no: '',
          telephone: ''
        }
      ]
    },
    // 继续购买
    continueBuying() {
      this.buyStatus = ''
      this.rowLsit = [
        {
          name: '',
          id_type: '',
          id_no: '',
          telephone: ''
        }
      ]
    },
    // 暂存订单
    createHoldOrder() {
      this.holdQuery.per_data = this.addData()
      createHoldOrder(this.holdQuery)
        .then((res) => {
          this.$message({
            showClose: true,
            message: '暂存订单成功',
            duration: 3000,
            type: 'success'
          })
          this.holdDialogVisible = false
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: '暂存订单失败',
            duration: 3000,
            type: 'error'
          })
        })
    },
    // 获得暂存订单
    async getHoldOrderdDtails(id, price) {
      const { data: res } = await getHoldOrderdDtails(id)
      // //
      const per_data = JSON.parse(res.data.per_data)
      this.rowLsit = per_data.ticketEntity[0].guest
      this.price = price
      this.query.datetime = per_data.ticketEntity[0].datetime
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  .box-card {
    h3 {
      font-size: 24px;
      margin-bottom: 0;
    }
    .clearfix {
      h3 {
        display: inline-block;
      }
      .el-button {
        position: relative;
        margin-left: 32px;
        font-size: 14px;
        top: -5px;
      }
      p {
        color: #999999;
        font-size: 16px;
        margin-bottom: 0;
      }
    }
    .text_item {
      margin-bottom: 16px;
      h3 {
        margin-top: 0;
      }
      .el-col {
        text-align: center;
        font-size: 14px;
      }
      p {
        margin-top: 28px;
        color: #666666;
      }
      .el-tag{
        font-size: 14px;
      }
    }
  }
}
.bottom {
  margin-top: 48px;
  // background-color: #f0f2f5;
  width: 100%;
  min-width: 1047px;
  // background-color: black;
  .box-card-left {
    position: relative;
    min-height: 500px;
    h3 {
      font-size: 24px;
      //   margin: 0 0;
    }
    .clearfix {
      h3 {
        display: inline-block;
      }
      .el-button {
        position: relative;
        margin-left: 32px;
        font-size: 14px;
        top: -5px;
      }
      .upload-demo {
        display: inline-block;
        width: 100px;
        .el-upload-list {
          position: absolute;
          .el-upload-list__item {
            position: absolute;
          }
        }
      }
      .button_text {
        font-size: 20px;
        color: #df1e19;
        top: -2px;
      }
      p {
        color: #999999;
        font-size: 16px;
        margin-bottom: 0;
      }
    }
    .text_item {
      p {
        font-size: 16px;
        color: #2a2a2a;
        margin-bottom: 10px;
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          text-align: center;
          border-radius: 50%;
          color: #999999;
          border: 1px solid #999999;
          font-size: 12px;
          cursor: pointer;
        }
      }
      .el-input {
        width: 80%;
      }
      .el-select {
        width: 80%;
      }
      .svg-icon {
        position: absolute;
        font-size: 26px;
        bottom: 5px;
        cursor: pointer;
      }
      .svg-icon:nth-child(2) {
        margin-left: 50px;
      }
    }
  }
  .box-card-right {
    height: 500px;
  }
  @media screen and (max-width: 1700px) {
    .el-col-15 {
      width: calc(95.8% - 530px);
    }
    .el-col-8 {
      width: 530px;
    }
  }
}
// 卡片弹出框
.wrapper {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgb(0, 0, 0, 0.3);
  .el-card {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 890px;
    overflow: auto;
    height: 540px;
    transform: translate(-50%, -50%);
    .clearfix {
      h3 {
        margin: 0;
      }
      .svg-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
      }
    }
    .text_item {
      .filter {
        position: relative;
        left: 50%;
        transform: translate(-50%);
      }
      .reset {
        width: 38px;
      }
      //   商品
      .commodity {
        cursor: pointer;
        position: relative;
        display: inline-block;
        height: 130px;
        width: 33.33%;
        img {
          position: absolute;
          z-index: -100;
        }
        p {
          text-align: center;
        }
        .p_top {
          font-weight: Bold;
          color: #ffffff;
          font-size: 18px;
          margin-top: 23px;
        }
        .p_bottom {
          color: #999999;
          font-size: 14px;
          margin-top: 35px;
        }
        .choice {
          right: 7px;
          bottom: 10px;
        }
        // background-image: url('@/assets/homepage/commodity.png');
      }
    }
  }
}
//日历
.minWidth {
  min-width: 400px;
}
.calendar-wrapper {
  width: 100%;
  height: 100%;
  min-width: 490px;
  min-height: 370px;
  // text-align: center;
}
.box-card-right-success {
  min-height: 500px;
  .clearfix {
    h3 {
      font-size: 24px;
      //   margin: 0 0;
    }
  }
  .text_item {
    .el-button {
      margin: 40px auto;
      display: block;
      width: 80%;
    }
  }
}
// 出票成功
.success {
  // position: relative;
  .svg-icon {
    position: absolute;
    bottom: 0px;
    margin-left: -16px;
  }
  span {
    position: absolute;
    bottom: 3px;
    margin-left: 24px;
    font: 14px;
    color: #3ac23a;
  }
}
// 暂存订单提示框
.hold {
  span {
    color: #000000;
  }
  .el-input {
    width: 70%;
    margin-left: 12px;
  }
  p {
    margin: 20px 0;
  }
  .dialog-footer {
    height: 30px;
    .el-button {
      float: right;
      margin-right: 20px;
    }
  }
}
//固定定位
.fixed {
  cursor: pointer;
  // z-index: 1000;
  position: absolute;
  top: 10px;
  right: 10px;
}
// 出票弹出框
.addTicket {
  p {
    margin-top: 0px;
    margin-bottom: 30px;
    i {
      text-align: center;
      display: inline-block;
      margin-right: 12px;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      background-color: #e29836;
      color: blanchedalmond;
    }
  }
  div {
    text-align: right;
  }
}
//字体十四px

</style>

<style lang="css" scoped>
.app-main {
  background-color: #f0f2f5;
}
#upload /deep/ .el-upload-list {
  position: absolute !important;
}
.hold /deep/ .el-dialog {
  min-width: 300px !important;
}
.calendar-wrapper {
  padding: 0 !important;
}
</style>
